<template>
  <el-form ref="form" :model="formData" label-width="120px">
    <el-form-item label="订单人姓名" prop="name">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item label="单位" prop="company">
      <el-input v-model="formData.company" />
    </el-form-item>
    <el-form-item label="地址" prop="address">
      <el-cascader
        :options="regionData"
        v-model="formData.address"
        @change="handleChange"
        style="width: 300px"
      />
    </el-form-item>
    <el-form-item label="联系方式" prop="phone">
      <el-input v-model="formData.phone" />
    </el-form-item>
    <el-form-item label="订单类型" prop="order">
      <el-radio-group v-model="formData.order">
        <el-radio label="normal">常规订单</el-radio>
        <el-radio label="urgent">加急订单</el-radio>
        <el-radio label="special">特殊订单</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      v-if="formData.order === 'special'"
      label="具体日期"
      prop="date"
    >
      <el-date-picker
        v-model="formData.date"
        type="date"
        placeholder="选择日期"
      />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="formData.remark" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { reactive } from "vue";
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElCascader,
  ElRadioGroup,
  ElRadio,
  ElDatePicker,
  ElButton
} from "element-plus";
import { regionData } from "@/utils/chinaArea";
export default {
  name: "OrderForm",
  components: {
    // 注册需要用到的 Element Plus 组件
    // 例如 ElForm, ElFormItem, ElInput 等
    ElForm,
    ElFormItem,
    ElInput,
    ElCascader,
    ElRadioGroup,
    ElRadio,
    ElDatePicker,
    ElButton
  },
  props: {
    // 定义需要传入的属性
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const formData = reactive({
      name: "",
      company: "",
      address: [],
      phone: "",
      order: "normal",
      date: "",
      remark: ""
    });

    const submitForm = () => {
      // TODO: 提交表单数据
      console.log(formData);
    };
    const resetForm = () => {
      // TODO: 重置表单数据
      console.log("reset form");
    };
    const handleChange = value => {
      console.log(value);
    };

    return {
      formData,
      submitForm,
      resetForm,
      handleChange,
      regionData
    };
  }
};
</script>
